<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示js10_3事件对象</title>
		<style type="text/css">
			#divOuter{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
			}
			#divInner{
				width: 50px;
				height: 50px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="divOuter">
			<div id="divInner">
				
			</div>
		</div>
		<p id="p1">什么什么大冒险</p>
		<a href="http://baidu.com" target="_blank" id="linkBaidu">百度</a>
		
		<input type="text" id="txt1" value="测试多事件" />
		
		<button id="d1">测试多事件绑定后的事件对象</button>
		
		<script type="text/javascript">
			var divOuter = document.getElementById('divOuter');
			divOuter.onclick = function(e){
				console.log("divOuter是否冒泡:" + e.bubbles);
			}
			var divInner = document.getElementById('divInner');
			divInner.onclick = function(e){
				console.log("divInner是否支持冒泡:" + e.bubbles);
				// e.stopPropagation()会中断冒泡流的过程
				// e.stopPropagation();
			}
			
			// 显示是否可取消元素的默认行为
			document.onmousedown = function(e){
				console.log("是否可以取消这个鼠标按键" + e.button + "的默认行为:" + e.cancelBubble);
			}
			
			document.getElementById('p1').onclick = function(e){
				console.log("是否可以取消p标签的onclick事件的默认行为:" + e.cancelBubble);
				console.log("事件处理的元素为:" + e.currentTarget.innerHTML);
				console.log("事件处理的目标为:" + e.target.id)
				
				console.log(e)
			}
			
			document.getElementById('txt1').onclick = function(e){
				onTxtEvent(e);
			}
			
			document.getElementById('txt1').onmousedown = function(e){
				onTxtEvent(e);
			}
			
			document.getElementById('txt1').onchange = function(e){
				onTxtEvent(e);
			}
			
			
			
			function onTxtEvent(e){
				switch(e.type){
					case "click":
						console.log(e.target.id + "的点击事件")
						break;
					case 'mousedown':
						console.log(e.target.id + '的鼠标按下事件')
						break;
					case 'change':
						console.log(e.target.id + "正在修改")
						break;
				}
			}
			// 使用DOM0的方式对一个元素绑定多个事件
			var btn=document.getElementById('d1');
			var handler = function(){
				// 当被绑定到的事件触发时.会在当前调用的上下文环境自动生成event对象.
				// 用来获取或设置该次事件相关的信息
				if(!event)
					return;
				  switch(event.type){
					  case "click":
						  alert("clicked");
						  break;
				 
					  case "mouseover":
						  event.target.style.background='red';
						  break;
					  case "mouseout":
						  event.target.style.background='yellow';
						  break;
				  }
			};
			btn.onclick=handler;
			btn.onmouseover=handler;
			btn.onmouseout=handler;
			
			var Link = document.getElementById("linkBaidu");
			Link.onclick=function(){
				// 取消了发生时间的标签的默认行为.这里的标签为a连接.
				// a连接的点击事件在这里被终止.结果就是不再能打开或跳转到href指定的url
			    event.preventDefault();
			}
			
		</script>
	</body>
</html>
